<template>
  <div>
    <h3>学生管理</h3>
    <hr>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="学生状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>&emsp;&emsp;
      <el-form-item label="学生姓名">
        <el-input v-model="form.username" placeholder="请输入搜索的学生姓名"></el-input>
      </el-form-item>&emsp;&emsp;
      <el-form-item label="学生电话">
        <el-input v-model="form.mobile" placeholder="请输入搜索的学生电话"></el-input>
      </el-form-item>&emsp;&emsp;

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>&emsp;
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTable" :data="reslist" border stripe tooltip-effect="dark" style="width: 100%;" class="tab"
      height="450" @selection-change="selcgange">
      <el-table-column type="selection" width="100" align="center">
      </el-table-column>
      <el-table-column label="学生姓名" prop="nickname" align="center">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">{{ scope.row.status?'启用':'禁用' }}</template>
      </el-table-column>
      <el-table-column prop="address" label="创建时间" width="250" align="center">
        <template slot-scope="scope">{{ scope.row.created_at | gettime }}</template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="330" align="center">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" disabled>详情</el-button>
          <el-button type="success" plain size="mini" @click="redact(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status == 0" type="success" size="mini" @click="tab(scope.row)">启用</el-button>
          <el-button v-else type="danger" size="mini" @click="tab(scope.row)">禁用</el-button>
          <!-- <el-button type="warning" plain size="mini" @click="tab(scope.row)">禁用/启用</el-button> -->
          <el-button type="danger" plain size="mini" @click="del(scope.$index)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 选中删除 -->
    <div>
      <el-button type="danger" round class="right" size="small" @click="delselected">选中删除</el-button>
    </div>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="list.length" :page-size="pageSize"
      :current-page="pageNum" @current-change="changePage">
    </el-pagination>


    <el-dialog title="用户信息" :visible.sync="showEdit">
      <el-form :model="edit">
        <el-form-item label="姓名">
          <el-input v-model="edit.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="edit.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="edit.status">
            <el-option label="启用" :value="1 "></el-option>
            <el-option label="禁用" :value="0 "></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          status: '',
          mobile: ''
        },
        copylist: [],
        list: [],
        showEdit: false,
        edit: {
          nickname: "",
          mobile: "",
          status: "",
        },
        pageSize: 7,
        pageNum: 1,
        removeids: []
      }
    },
    methods: {
      tab(row) {
        // row.status = !row.status

        if (row.status == 1) {
          row.status = 0
        } else {
          row.status = 1
        }
        this.$notify({
          title: '成功',
          message: '学生状态切换成功！',
          type: 'success'
        });
      },
      selcgange(val) {
        // console.log(val);
        this.removeids = val.map(item => {
          return item.uid
        })
        // console.log(this.removeids);
      },
      delselected() {
        if (this.removeids.length == 0) {
          this.$notify.error({
            title: '错误',
            message: '未选需要删除的信息！'
          });
        } else {
          this.$confirm('是否删除选中的信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.list = this.list.filter(item => {
              if (this.removeids.indexOf(item.uid) == -1) {
                return item
              }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }


      },
      changePage(val) {
        // console.log(val);
        this.pageNum = val
      },

      search() {
        if (this.form.status == "") {
          this.list = this.copylist.filter((item) => {
            return (
              item.nickname.includes(this.form.username) &&
              item.mobile.includes(this.form.mobile)
            );
          });
        } else {
          this.list = this.copylist.filter((item) => {
            console.log(item.status === this.form.status);
            return (
              item.nickname.includes(this.form.username) &&
              item.mobile.includes(this.form.mobile) &&
              item.status == this.form.status
            );
          });
        }
      },
      reset() {
        this.form.username = ''
        this.form.status = ''
        this.form.mobile = ''
        this.list = this.copylist;
      },
      del(index) {
        // console.log(index);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.list.splice(index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      redact(row) {
        this.edit = row;
        this.showEdit = true;
      },
      show() {
        this.showEdit = false
        this.$message({
          message: '信息未改动！',
          type: 'warning'
        });

      },
      update() {
        this.showEdit = false;
        this.$message({
          message: '恭喜你，修改成功！',
          type: 'success'
        });
      }
    },
    filters: {
      gettime(val) {
        return new Date(val * 1000).toLocaleString()
      }
    },
    mounted() {
      this.$axios.get('/list.json').then((rel) => {
        this.list = rel.data
        this.copylist = rel.data
        // console.log(this.list);
      }).catch((err) => {
        console.log(err);
      });
    },
    computed: {
      reslist() {
        return this.list.slice(
          this.pageSize * (this.pageNum - 1),
          this.pageSize * this.pageNum
        )
      }
    },
  }
</script>

<style lang="scss" scoped>
  h3 {
    text-align: left;
  }

  .demo-form-inline {
    text-align: left;
  }

  .right {
    margin-top: 5px;
    float: right;
  }
</style>